<template>
  <div>
    <div>
      <ul>
     
        <li
          v-for="(item, index) in list"
          :key="index"
          :class="{ active: index === idx }"
          @click="getadd1(item)"
        >
          {{ item.category_name }}
        </li>
      </ul>
      <div class="box">
      <dl v-for="(item, index) in cont1" :key="index">
        <dt>
          <router-link :to="'/tadeil/'+item.product_id">
          <img v-lazy="`http://47.115.85.237:3000/${item.product_picture}`" /></router-link>
        </dt>
        <dd>
          <p>{{ item.product_name }}</p>
          <p>{{ item.product_title }}</p>
          <p>
            <span  style=" color:coral; margin-right:10px;">{{ item.product_price }}</span>
            <span style=" color:#888; text-decoration:line-through; ">{{item.product_selling_price}}</span> 
            </p>
             
        </dd>
    
      </dl>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "",
  // 组件注册
  components: {},
  // 父组件传参
  props: {},
  // 变量声明
  data() {
    return {
      list: [],

      cont1: [],
      idx: 0,
    };
  },
  // Vue实例创建完成以后执行 数据可用
  async created() {
    let res = await this.$axios.post("api/product/getCategory");
    // console.log(res)
    let { category } = res.data;
    this.list = category;
  },
  // Vue模板挂载完毕以后执行  DOM节点加载完毕了（可以获取节点了）
  mounted() {
      this.getadd()
  },
  // keepalive 缓存进入执行
  activited() {},
  // vue组件更新完毕以后执行
  update() {},
  // 定义事件
  methods: {

    async getadd1(item) {
    
      let res = await this.$axios.post("api/product/getProductByCategory", {
        categoryID: item.category_id,
        currentPage: 1,
        pageSize: 15,
      });
   let index =  this.list.indexOf(item)

  this.idx = index
      let { Product } = res.data;
      console.log(Product)
      this.cont1 = Product;
    },

        async getadd() {
    
      let res = await this.$axios.post("api/product/getProductByCategory", {
        categoryID: 1,
        currentPage: 1,
        pageSize: 15,
      });
  


      let { Product } = res.data;

      this.cont1 = Product;
    },

  },
  // 过滤器
  filter: {},
  // 计算属性
  computed: {},
  // 监听属性
  watch: {},
};
</script>

<style scoped>
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
dl{
  width: 300px;
  margin:10px;
  height: 100%;
  padding:10px;
}
dl:hover{
  box-shadow: 0 0 20px #000000;
}
li {
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
img {
  width: 100%;
}
.active {
  background: blue;
  color: #fff;
}
p{
  text-align: center;
}
</style>
